<template>
  <!-- //添加标签弹框 -->
  <u-modal v-model="showtag" :show-cancel-button="true" @confirm="addtag">
  			<view class="slot-content">
  		<u-input class="inputer" v-model.trim="tager" placeholder-style="font-size: 35rpx"  height="100" input-align="center" type="text" placeholder="请输入要添加的标签"  />
  			</view>
  		</u-modal>
 <!-- 删除标签 -->
 <u-modal v-model="deleteshow" :show-cancel-button="true" :content="content"  @confirm="deletetags"></u-modal>
  <view class="wrap">
    <view class="top">
      <view class="item">
        <view class="left">收货人</view>
        <input type="text" placeholder-class="line" placeholder="请填写收货人姓名" v-model.trim="addresdata.recipient_name"/>
      </view>
      <view class="item">
        <view class="left">手机号码</view>
        <input type="text" placeholder-class="line" placeholder="请填写收货人手机号" v-model.trim="addresdata.recipient_mobile" />
      </view>
      <view class="item" @tap="showRegionPicker">
        <view class="left">所在地区</view>
        <input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" v-model.trim="addresdata.alladdres" />
      </view>
      <view class="item address">
        <view class="left">详细地址</view>
        <textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" v-model.trim="addresdata.detail_address" />
      </view>

    </view>
    <view class="bottom">
      
      <view class="tag">
        <view class="left">标签</view>
        <view class="right">
          <text class="tags" :class="{active:item.id ===addresdata.AddressTag}"  v-for="(item,index) in addrestag.list" :key="index" @click="tageid(item.id)" @longpress="deletetag(item.id,item.name)">{{item.name}}</text>
          <view class="tags plus" @click="showtag=true"><u-icon size="22" name="plus"></u-icon></view>
        </view>
      </view>
      <view class="default">
        <view class="left">
          <view class="set">设置默认地址</view>
          <view class="tips">提醒：每次下单会默认推荐该地址</view>
        </view>
        <view class="right">
          <switch color="#ff0000" @change="checked" />
        </view>
      </view>
    </view>
    <u-picker mode="region" ref="uPicker" v-model="show" @confirm="addres" />
  </view>
  <view class="addSite" @click="updateaddress" v-if="addressid">
  	<view class="add">
       确认修改收货地址
  	</view>
  </view>
 <view class="addSite" @click="addaddress" v-else>
 	<view class="add">
 		<u-icon name="plus" color="#ffffff" class="icon" size="30"></u-icon>添加收货地址
 	</view>
 </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app';
  import {
    ref
  } from 'vue';
  import {
    addressUserStore
  } from "../../store/address.js"
  const  addressStore= addressUserStore()
  //获取地址标签
  addressStore.getaddrestag()
  //结构出标签列表showtag
  const {addrestag} =addressStore
  //定义修改地址id
  const addressid = ref("0")
  onLoad((options) => {
   if(options.addressid){
       addressid.value = options.addressid
         getaddre( addressid.value)
         uni.setNavigationBarTitle({
            title: "修改收货地址",
          });
   }else{
     addressid.value = ""
   }
  });
  //定义收货地址字段
  const addresdata = ref(
  {
    recipient_name: "",//收货名
    recipient_mobile: "",//手机号
    province: "",//省级
    city: "",//市
    district: "",//区
    alladdres:"",//总地址
    detail_address:"",//详细地址
    AddressTag:0,//所属标签id
    isDefault:false,//是否是默认地址
  }
  )
  //获取要修改的地址
  async function  getaddre(id){
    const response = await uni.$http.get("/addres/getaddr",{'id':id})
    addresdata.value = response.data
    }
  //定义是否显示选择地址
  const show = ref(false)
  //选择地址
  function showRegionPicker() {
    show.value = true;
  }
  //选择的地址
  function addres(value) {
    addresdata.value.province = value.province.name
    addresdata.value.city = value.city.name
    addresdata.value.district = value.area.name
  addresdata.value.alladdres = value.province.name +  value.city.name +value.area.name
  }
  //定义是否显示添加标签
  const showtag = ref(false)
  //定义要添加的标签名字
  const tager = ref("")
  //添加标签
  function addtag(){
    if(tager.value===""){
      uni.showToast({
        title: "标签不能为空",
        duration: 2000,
        icon: "error"
      });
    }else{
         addressStore.addaddrestag(tager.value)
    }
  }
 //定义是否显示删除标签
 const deleteshow = ref(false)
 //定义是否删除标签框内容
 const content = ref("")
 //定删除标签id
 const deletetage = ref(0)
  //删除标签
  function deletetag(id,name){
    content.value = `确认删除标签${name}`
    deleteshow.value = true
      deletetage.value = id
  }
//确认删除该标签
function deletetags(){
      addressStore.deleteaddrestag(deletetage.value)
}
  //选中标签
 function  tageid(id){
   if(id=== addresdata.value.AddressTag){
     addresdata.value.AddressTag = 0
   }else{
        addresdata.value.AddressTag = id
   }
 }
 //修改默认地址状态
 function checked(status){
   addresdata.value.isDefault = status.detail.value
 }
 //添加收货地址
 function addaddress(){
   addressStore.addaddress(addresdata.value)
 }
 //修改收货地址
 function updateaddress(){
     addressStore.updateaddress(addresdata.value)
 }
</script>

<style lang="scss" scoped>
.slot-content{
 width: 300rpx;
margin: 0 auto;

}
  .wrap {
    background-color: #f2f2f2;

    .top {
      background-color: #ffffff;
      border-top: solid 2rpx $u-border-color;
      padding: 22rpx;

      .item {
        display: flex;
        font-size: 32rpx;
        line-height: 100rpx;
        align-items: center;
        border-bottom: solid 2rpx $u-border-color;

        .left {
          width: 180rpx;
        }

        input {
          text-align: left;
        }
      }

      .address {
        padding: 20rpx 0;

        textarea {
          // width: 100%;
          height: 150rpx;
          background-color: #f7f7f7;
          line-height: 60rpx;
          margin: 40rpx auto;
          padding: 20rpx;
        }
      }

      .site-clipboard {
        padding-right: 40rpx;

        textarea {
          // width: 100%;
          height: 150rpx;
          background-color: #f7f7f7;
          line-height: 60rpx;
          margin: 40rpx auto;
          padding: 20rpx;
        }

        .clipboard {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          color: $u-tips-color;
          height: 80rpx;

          .icon {
            margin-top: 6rpx;
            margin-left: 10rpx;
          }
        }
      }
    }

    .bottom {
      margin-top: 20rpx;
      padding: 40rpx;
      padding-right: 0;
      background-color: #ffffff;
      font-size: 28rpx;

      .tag {
        display: flex;

        .left {
          width: 160rpx;
        }

        .right {
          display: flex;
          flex-wrap: wrap;

          .tags {
            width: 140rpx;
            padding: 16rpx 8rpx;
            border: solid 2rpx $u-border-color;
            text-align: center;
            border-radius: 50rpx;
            margin: 0 10rpx 20rpx;
            display: flex;
            font-size: 28rpx;
            align-items: center;
            justify-content: center;
            color: $u-content-color;
            line-height: 1;
          }
          .active{
             background-color: #f3f379;
          }
          .plus {
            //padding: 10rpx 0;
          }
        }
      }

      .default {
        margin-top: 50rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: solid 2rpx $u-border-color;
        line-height: 64rpx;

        .tips {
          font-size: 24rpx;
        }

        .right {}
      }
    }
  }
  .addSite {
  	display: flex;
  	justify-content: space-around;
  	width: 600rpx;
  	line-height: 100rpx;
  	position: absolute;
  	bottom: 30rpx;
  	left: 80rpx;
  	background-color: red;
  	border-radius: 60rpx;
  	font-size: 30rpx;
  	.add{
  		display: flex;
  		align-items: center;
  		color: #ffffff;
  		.icon{
  			margin-right: 10rpx;
  		}
  	}
  }
</style>